<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>文章列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #2196f3;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #2196f3;
      color: white;
    }
    
    /* 通用文章列表页面样式 */
    .article-page {
      display: none;
    }
    
    .article-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      padding: 12px 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-title {
      font-size: 14px;
      color: #666;
    }
    
    .filter-options {
      display: flex;
      gap: 10px;
    }
    
    .filter-option {
      font-size: 14px;
      color: #2196f3;
    }
    
    /* 文章列表容器 */
    .article-list {
      padding-bottom: 20px;
    }
    
    /* 文章项基础样式 */
    .article-item {
      background-color: #fff;
      margin-bottom: 10px;
      overflow: hidden;
    }
    
    .article-header {
      display: flex;
      align-items: center;
      padding: 10px 15px;
    }
    
    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #eee;
      margin-right: 10px;
      overflow: hidden;
    }
    
    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .user-info {
      flex: 1;
    }
    
    .username {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .post-time {
      font-size: 12px;
      color: #999;
    }
    
    .article-content {
      padding: 0 15px 10px;
      font-size: 15px;
      line-height: 1.5;
    }
    
    .article-actions {
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      border-top: 1px solid #f5f7fa;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 14px;
      background: none;
      border: none;
      padding: 5px 0;
      width: 25%;
    }
    
    .action-btn i {
      margin-right: 5px;
      font-size: 16px;
    }
    
    .action-btn:active {
      background-color: #f5f7fa;
    }
    
    /* 图片容器样式 - 处理0-9张图片的展示 */
    .images-container {
      display: flex;
      flex-wrap: wrap;
      margin: 5px 15px 10px;
      gap: 3px;
    }
    
    .article-image {
      background-color: #f5f5f5;
      position: relative;
      overflow: hidden;
    }
    
    .article-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    /* 1张图片 */
    .images-1 .article-image {
      width: 100%;
      height: 220px;
    }
    
    /* 2张图片 */
    .images-2 .article-image {
      width: calc(50% - 1.5px);
      height: 180px;
    }
    
    /* 3张图片 */
    .images-3 .article-image {
      width: calc(33.333% - 2px);
      height: 120px;
    }
    
    /* 4张图片 */
    .images-4 {
      flex-direction: column;
      height: 246px;
    }
    
    .images-4 .image-row {
      display: flex;
      gap: 3px;
      flex: 1;
    }
    
    .images-4 .article-image {
      flex: 1;
      height: 100%;
    }
    
    /* 5-9张图片 */
    .images-5, .images-6, .images-7, .images-8, .images-9 {
      height: 246px;
    }
    
    .images-5 .article-image,
    .images-6 .article-image,
    .images-7 .article-image,
    .images-8 .article-image,
    .images-9 .article-image {
      width: calc(33.333% - 2px);
      height: calc(50% - 1.5px);
    }
    
    /* 超过3张图片时的数量提示 */
    .image-count {
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 3px 0 0 0;
    }
    
    /* 样式1 - 标准列表 */
    .standard-list .article-item {
      border-radius: 8px;
      margin: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 样式2 - 紧凑列表 */
    .compact-list .article-item {
      border-bottom: 1px solid #eee;
      margin-bottom: 0;
    }
    
    .compact-list .article-content {
      padding-bottom: 5px;
    }
    
    .compact-list .images-container {
      margin-bottom: 5px;
    }
    
    /* 样式3 - 大图列表 */
    .large-image-list .article-item {
      border-radius: 8px;
      margin: 10px;
      overflow: hidden;
    }
    
    .large-image-list .images-1 .article-image {
      height: 280px;
    }
    
    .large-image-list .images-2 .article-image {
      height: 220px;
    }
    
    .large-image-list .article-content {
      font-size: 16px;
      line-height: 1.6;
      padding-bottom: 15px;
    }
    
    /* 样式4 - 网格列表 */
    .grid-list {
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    
    .grid-list .article-item {
      display: flex;
      flex-direction: column;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .grid-list .article-header {
      padding: 8px 10px;
    }
    
    .grid-list .avatar {
      width: 28px;
      height: 28px;
    }
    
    .grid-list .username {
      font-size: 13px;
    }
    
    .grid-list .post-time {
      font-size: 11px;
    }
    
    .grid-list .article-content {
      padding: 0 10px 8px;
      font-size: 13px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }
    
    .grid-list .images-container {
      margin: 0 0 8px;
      gap: 2px;
      flex: 1;
    }
    
    .grid-list .images-1 .article-image {
      height: 140px;
    }
    
    .grid-list .images-2 .article-image {
      height: 100px;
    }
    
    .grid-list .images-3 .article-image {
      height: 70px;
    }
    
    .grid-list .article-actions {
      display: none;
    }
    
    /* 无图文章样式 */
    .no-image .article-content {
      padding-bottom: 15px;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">推荐文章</h1>
    <a href="#" class="nav-btn primary" id="searchBtn">
      <i class="fa fa-search"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准列表</div>
      <div class="style-tab" data-style="compact">紧凑列表</div>
      <div class="style-tab" data-style="large">大图列表</div>
      <div class="style-tab" data-style="grid">网格列表</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-title">为你推荐</div>
    <div class="filter-options">
      <div class="filter-option" onclick="showToast('已切换至最新')">最新</div>
      <div class="filter-option" onclick="showToast('已切换至热门')">热门</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准列表 -->
  <div class="article-page active standard-list" id="standard">
    <div class="article-list">
      <!-- 无图片文章 -->
      <div class="article-item no-image">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">旅行日记</div>
            <div class="post-time">今天 08:25</div>
          </div>
        </div>
        <div class="article-content">
          分享一个小众旅行目的地，那里有着未被过度开发的自然风光和淳朴的民风。最佳旅行季节是春秋两季，建议自驾游，沿途的风景绝对值得你驻足停留。
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
      
      <!-- 1张图片文章 -->
      <div class="article-item images-1">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">美食探店</div>
            <div class="post-time">昨天 19:40</div>
          </div>
        </div>
        <div class="article-content">
          这家隐藏在巷子里的小餐馆，招牌菜是红烧肉和清蒸鱼，味道非常正宗，价格也很亲民。
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/292/600/400" alt="文章图片">
          </div>
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
      
      <!-- 3张图片文章 -->
      <div class="article-item images-3">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">城市风光</div>
            <div class="post-time">昨天 15:30</div>
          </div>
        </div>
        <div class="article-content">
          雨后的城市别有一番风味，空气清新，街道干净，随手拍了几张照片分享给大家。
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/1016/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/1019/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/1039/300/300" alt="文章图片">
          </div>
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
      
      <!-- 6张图片文章 -->
      <div class="article-item images-6">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/1027/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">自然摄影</div>
            <div class="post-time">06-12 10:15</div>
          </div>
        </div>
        <div class="article-content">
          周末去郊外采风，捕捉到了一些大自然的美丽瞬间，分享给喜欢摄影的朋友们。
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/10/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/11/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/12/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/13/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/14/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/15/300/300" alt="文章图片">
          </div>
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 紧凑列表 -->
  <div class="article-page compact-list" id="compact">
    <div class="article-list">
      <!-- 无图片文章 -->
      <div class="article-item no-image">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">旅行日记</div>
            <div class="post-time">今天 08:25</div>
          </div>
        </div>
        <div class="article-content">
          分享一个小众旅行目的地，那里有着未被过度开发的自然风光和淳朴的民风。
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i></button>
          <button class="action-btn"><i class="fa fa-comment-o"></i></button>
          <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
        </div>
      </div>
      
      <!-- 2张图片文章 -->
      <div class="article-item images-2">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">美食探店</div>
            <div class="post-time">昨天 19:40</div>
          </div>
        </div>
        <div class="article-content">
          这家隐藏在巷子里的小餐馆，招牌菜是红烧肉和清蒸鱼，味道非常正宗。
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/292/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/431/300/300" alt="文章图片">
          </div>
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i></button>
          <button class="action-btn"><i class="fa fa-comment-o"></i></button>
          <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
        </div>
      </div>
      
      <!-- 4张图片文章 -->
      <div class="article-item images-4">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">城市风光</div>
            <div class="post-time">昨天 15:30</div>
          </div>
        </div>
        <div class="article-content">
          雨后的城市别有一番风味，空气清新，街道干净，随手拍了几张照片。
        </div>
        <div class="images-container">
          <div class="image-row">
            <div class="article-image">
              <img src="https://picsum.photos/id/1016/300/300" alt="文章图片">
            </div>
            <div class="article-image">
              <img src="https://picsum.photos/id/1019/300/300" alt="文章图片">
            </div>
          </div>
          <div class="image-row">
            <div class="article-image">
              <img src="https://picsum.photos/id/1039/300/300" alt="文章图片">
            </div>
            <div class="article-image">
              <img src="https://picsum.photos/id/1040/300/300" alt="文章图片">
            </div>
          </div>
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i></button>
          <button class="action-btn"><i class="fa fa-comment-o"></i></button>
          <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
        </div>
      </div>
      
      <!-- 9张图片文章 -->
      <div class="article-item images-9">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/1027/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">自然摄影</div>
            <div class="post-time">06-12 10:15</div>
          </div>
        </div>
        <div class="article-content">
          周末去郊外采风，捕捉到了一些大自然的美丽瞬间。
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/10/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/11/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/12/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/13/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/14/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/15/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/16/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/17/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/18/300/300" alt="文章图片">
          </div>
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i></button>
          <button class="action-btn"><i class="fa fa-comment-o"></i></button>
          <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 大图列表 -->
  <div class="article-page large-image-list" id="large">
    <div class="article-list">
      <!-- 1张图片文章 -->
      <div class="article-item images-1">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">美食探店</div>
            <div class="post-time">昨天 19:40</div>
          </div>
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/292/600/400" alt="文章图片">
          </div>
        </div>
        <div class="article-content">
          这家隐藏在巷子里的小餐馆，招牌菜是红烧肉和清蒸鱼，味道非常正宗，价格也很亲民。老板是一对老夫妻，非常热情好客。
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
      
      <!-- 无图片文章 -->
      <div class="article-item no-image">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">旅行日记</div>
            <div class="post-time">今天 08:25</div>
          </div>
        </div>
        <div class="article-content">
          分享一个小众旅行目的地，那里有着未被过度开发的自然风光和淳朴的民风。最佳旅行季节是春秋两季，建议自驾游，沿途的风景绝对值得你驻足停留。当地的特色美食也不容错过，尤其是那家开了三十年的老字号面馆。
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
      
      <!-- 2张图片文章 -->
      <div class="article-item images-2">
        <div class="article-header">
          <div class="avatar">
            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="username">城市风光</div>
            <div class="post-time">昨天 15:30</div>
          </div>
        </div>
        <div class="images-container">
          <div class="article-image">
            <img src="https://picsum.photos/id/1016/600/400" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/1019/600/400" alt="文章图片">
          </div>
        </div>
        <div class="article-content">
          雨后的城市别有一番风味，空气清新，街道干净，随手拍了几张照片分享给大家。特别是傍晚时分，夕阳西下，整个城市都被染上了一层金色。
        </div>
        <div class="article-actions">
          <button class="action-btn"><i class="fa fa-heart-o"></i> 喜欢</button>
          <button class="action-btn"><i class="fa fa-comment-o"></i> 评论</button>
          <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
          <button class="action-btn"><i class="fa fa-bookmark-o"></i> 收藏</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 网格列表 -->
  <div class="article-page grid-list" id="grid">
    <!-- 1张图片文章 -->
    <div class="article-item images-1">
      <div class="article-header">
        <div class="avatar">
          <img src="https://picsum.photos/id/237/200/200" alt="用户头像">
        </div>
        <div class="user-info">
          <div class="username">美食探店</div>
          <div class="post-time">昨天 19:40</div>
        </div>
      </div>
      <div class="article-content">
        这家隐藏在巷子里的小餐馆，味道非常正宗。
      </div>
      <div class="images-container">
        <div class="article-image">
          <img src="https://picsum.photos/id/292/300/300" alt="文章图片">
        </div>
      </div>
    </div>
    
    <!-- 3张图片文章 -->
    <div class="article-item images-3">
      <div class="article-header">
        <div class="avatar">
          <img src="https://picsum.photos/id/1005/200/200" alt="用户头像">
        </div>
        <div class="user-info">
          <div class="username">城市风光</div>
          <div class="post-time">昨天 15:30</div>
        </div>
      </div>
      <div class="article-content">
        雨后的城市别有一番风味，空气清新。
      </div>
      <div class="images-container">
        <div class="article-image">
          <img src="https://picsum.photos/id/1016/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/1019/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/1039/300/300" alt="文章图片">
        </div>
      </div>
    </div>
    
    <!-- 无图片文章 -->
    <div class="article-item no-image">
      <div class="article-header">
        <div class="avatar">
          <img src="https://picsum.photos/id/64/200/200" alt="用户头像">
        </div>
        <div class="user-info">
          <div class="username">旅行日记</div>
          <div class="post-time">今天 08:25</div>
        </div>
      </div>
      <div class="article-content">
        分享一个小众旅行目的地，那里有着未被过度开发的自然风光。
      </div>
    </div>
    
    <!-- 2张图片文章 -->
    <div class="article-item images-2">
      <div class="article-header">
        <div class="avatar">
          <img src="https://picsum.photos/id/1027/200/200" alt="用户头像">
        </div>
        <div class="user-info">
          <div class="username">自然摄影</div>
          <div class="post-time">06-12 10:15</div>
        </div>
      </div>
      <div class="article-content">
        周末去郊外采风，捕捉到了一些大自然的美丽瞬间。
      </div>
      <div class="images-container">
        <div class="article-image">
          <img src="https://picsum.photos/id/10/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/11/300/300" alt="文章图片">
        </div>
      </div>
    </div>
    
    <!-- 4张图片文章 -->
    <div class="article-item images-4">
      <div class="article-header">
        <div class="avatar">
          <img src="https://picsum.photos/id/1074/200/200" alt="用户头像">
        </div>
        <div class="user-info">
          <div class="username">生活记录</div>
          <div class="post-time">06-11 20:45</div>
        </div>
      </div>
      <div class="article-content">
        周末在家做了一顿丰盛的晚餐，和家人一起分享。
      </div>
      <div class="images-container">
        <div class="image-row">
          <div class="article-image">
            <img src="https://picsum.photos/id/292/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/431/300/300" alt="文章图片">
          </div>
        </div>
        <div class="image-row">
          <div class="article-image">
            <img src="https://picsum.photos/id/312/300/300" alt="文章图片">
          </div>
          <div class="article-image">
            <img src="https://picsum.photos/id/488/300/300" alt="文章图片">
          </div>
        </div>
      </div>
    </div>
    
    <!-- 5张图片文章 -->
    <div class="article-item images-5">
      <div class="article-header">
        <div class="avatar">
          <img src="https://picsum.photos/id/338/200/200" alt="用户头像">
        </div>
        <div class="user-info">
          <div class="username">宠物日常</div>
          <div class="post-time">06-11 16:30</div>
        </div>
      </div>
      <div class="article-content">
        记录我家猫咪的可爱瞬间，太治愈了。
      </div>
      <div class="images-container">
        <div class="article-image">
          <img src="https://picsum.photos/id/237/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/1074/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/1084/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/235/300/300" alt="文章图片">
        </div>
        <div class="article-image">
          <img src="https://picsum.photos/id/169/300/300" alt="文章图片">
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const articlePages = document.querySelectorAll('.article-page');
    const backBtn = document.getElementById('backBtn');
    const searchBtn = document.getElementById('searchBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        articlePages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 搜索按钮
    searchBtn.addEventListener('click', function() {
      showToast('打开搜索');
    });
    
    // 为所有操作按钮添加点击事件
    document.querySelectorAll('.action-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const actionText = this.textContent.trim() || this.querySelector('i').className.split(' ')[1].replace('fa-', '');
        showToast(`${actionText}功能`);
      });
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
